<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学科竞赛管理系统</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f8f9fa;
        }
        .glassmorphism {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        .nav-link {
            position: relative;
        }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #2563eb;
            transition: width 0.3s ease;
        }
        .nav-link:hover::after {
            width: 100%;
        }
        .mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }
        .mobile-menu.active {
            max-height: 500px;
        }
        .banner {
            background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
        }
        .btn-primary {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
        }
    </style>
</head>
<body class="min-h-screen">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center">
                <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.fJ9DtSzazQxyPAjRmE5KUwHaHR?rs=1&pid=ImgDetMain&cb=idpwebp2&o=7&rm=3" alt="校徽" class="h-10 w-10 mr-3">
                <span class="text-xl font-bold text-gray-800">学科竞赛管理系统</span>
            </div>
            
            <div class="hidden md:flex space-x-8">
                <a href="#home" class="nav-link text-gray-700 font-medium">首页</a>
                <a href="#competitions" class="nav-link text-gray-700 font-medium">竞赛报名</a>
                <a href="#projects" class="nav-link text-gray-700 font-medium">立项申报</a>
                <a href="#notices" class="nav-link text-gray-700 font-medium">通知公告</a>
                <a href="#achievements" class="nav-link text-gray-700 font-medium">竞赛成果</a>
                <a href="#downloads" class="nav-link text-gray-700 font-medium">相关下载</a>
            </div>
            
            <div class="hidden md:block">
                <a href="#login" class="btn-primary text-white px-6 py-2 rounded-full font-medium">登录</a>
            </div>
            
            <button class="md:hidden text-gray-600 focus:outline-none" id="mobileMenuButton">
                <i class="fas fa-bars text-2xl"></i>
            </button>
        </div>
        
        <!-- 移动端菜单 -->
        <div class="mobile-menu bg-white md:hidden" id="mobileMenu">
            <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
                <a href="#home" class="text-gray-700 font-medium py-2 border-b border-gray-100">首页</a>
                <a href="#competitions" class="text-gray-700 font-medium py-2 border-b border-gray-100">竞赛报名</a>
                <a href="#projects" class="text-gray-700 font-medium py-2 border-b border-gray-100">立项申报</a>
                <a href="#notices" class="text-gray-700 font-medium py-2 border-b border-gray-100">通知公告</a>
                <a href="#achievements" class="text-gray-700 font-medium py-2 border-b border-gray-100">竞赛成果</a>
                <a href="#downloads" class="text-gray-700 font-medium py-2 border-b border-gray-100">相关下载</a>
                <a href="#login" class="btn-primary text-white px-6 py-2 rounded-full font-medium text-center">登录</a>
            </div>
        </div>
    </nav>

    <!-- 横幅 -->
    <section id="home" class="banner text-white py-16">
        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">学科竞赛管理系统</h1>
                <p class="text-xl mb-8">创新引领未来，竞赛成就梦想</p>
                <div class="flex space-x-4">
                    <a href="#competitions" class="bg-white text-blue-800 px-6 py-3 rounded-full font-medium hover:bg-gray-100 transition">竞赛报名</a>
                    <a href="#projects" class="border-2 border-white text-white px-6 py-3 rounded-full font-medium hover:bg-white hover:text-blue-800 transition">立项申报</a>
                </div>
            </div>
            <div class="md:w-1/2">
                <img src="https://s.coze.cn/image/isq2zVDMV7Y/" alt="竞赛活动现场" class="rounded-xl shadow-xl w-full">
            </div>
        </div>
    </section>

    <!-- 竞赛报名 -->
    <section id="competitions" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold mb-12 text-center">竞赛报名</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="glassmorphism p-6 card-hover">
                    <div class="bg-blue-100 text-blue-800 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-trophy text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">国家级竞赛</h3>
                    <p class="text-gray-600 mb-4">包括"挑战杯"、"互联网+"等国家级高水平学科竞赛</p>
                    <a href="#" class="text-blue-600 font-medium flex items-center">
                        查看详情 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                
                <div class="glassmorphism p-6 card-hover">
                    <div class="bg-green-100 text-green-800 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-medal text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">省级竞赛</h3>
                    <p class="text-gray-600 mb-4">科技创新活动计划等省级学科竞赛</p>
                    <a href="#" class="text-blue-600 font-medium flex items-center">
                        查看详情 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                
                <div class="glassmorphism p-6 card-hover">
                    <div class="bg-purple-100 text-purple-800 w-12 h-12 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-award text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">校级竞赛</h3>
                    <p class="text-gray-600 mb-4">校内各类学科竞赛和创新实践活动</p>
                    <a href="#" class="text-blue-600 font-medium flex items-center">
                        查看详情 <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
            
            <div class="mt-12 glassmorphism p-8">
                <h3 class="text-2xl font-semibold mb-6">竞赛报名流程</h3>
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <div class="flex items-center mb-4 md:mb-0">
                        <div class="bg-blue-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">1</div>
                        <span class="font-medium">选择竞赛项目</span>
                    </div>
                    <i class="fas fa-arrow-right text-gray-400 mx-2 hidden md:block"></i>
                    <div class="flex items-center mb-4 md:mb-0">
                        <div class="bg-blue-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">2</div>
                        <span class="font-medium">填写报名信息</span>
                    </div>
                    <i class="fas fa-arrow-right text-gray-400 mx-2 hidden md:block"></i>
                    <div class="flex items-center mb-4 md:mb-0">
                        <div class="bg-blue-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">3</div>
                        <span class="font-medium">提交报名申请</span>
                    </div>
                    <i class="fas fa-arrow-right text-gray-400 mx-2 hidden md:block"></i>
                    <div class="flex items-center">
                        <div class="bg-blue-600 text-white w-8 h-8 rounded-full flex items-center justify-center mr-3">4</div>
                        <span class="font-medium">等待审核结果</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 立项申报 -->
    <section id="projects" class="py-16">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold mb-12 text-center">立项申报</h2>
            
            <div class="glassmorphism p-8 mb-12">
                <h3 class="text-2xl font-semibold mb-6">项目申报指南</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <div>
                        <h4 class="text-lg font-medium mb-3 text-gray-800">申报条件</h4>
                        <ul class="list-disc pl-5 space-y-2 text-gray-600">
                            <li>项目负责人为全日制在校本科生</li>
                            <li>团队成员不超过5人，可跨专业组队</li>
                            <li>项目需有明确指导教师</li>
                            <li>项目周期一般为1年</li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="text-lg font-medium mb-3 text-gray-800">申报材料</h4>
                        <ul class="list-disc pl-5 space-y-2 text-gray-600">
                            <li>《学科竞赛项目申报书》</li>
                            <li>项目计划书</li>
                            <li>团队成员信息表</li>
                            <li>指导教师推荐意见</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="glassmorphism p-8 card-hover">
                    <h3 class="text-2xl font-semibold mb-6">新项目申报</h3>
                    <p class="text-gray-600 mb-6">首次申请学科竞赛项目的团队请填写完整申报材料，经学院初审后提交至本科生院。</p>
                    <a href="#" class="btn-primary text-white px-6 py-2 rounded-full font-medium inline-block">开始申报</a>
                </div>
                
                <div class="glassmorphism p-8 card-hover">
                    <h3 class="text-2xl font-semibold mb-6">在研项目管理</h3>
                    <p class="text-gray-600 mb-6">已立项项目的中期检查、结题验收等管理工作。</p>
                    <a href="#" class="btn-primary text-white px-6 py-2 rounded-full font-medium inline-block">项目管理</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 通知公告 -->
    <section id="notices" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold mb-12 text-center">通知公告</h2>
            
            <div class="glassmorphism p-8">
                <div class="flex justify-between items-center mb-6">
                    <h3 class="text-2xl font-semibold">最新通知</h3>
                    <a href="#" class="text-blue-600 font-medium">查看更多 <i class="fas fa-arrow-right ml-1"></i></a>
                </div>
                
                <div class="space-y-6">
                    <div class="border-b border-gray-200 pb-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <h4 class="text-lg font-medium mb-1">关于2024年"挑战杯"全国大学生课外学术科技作品竞赛校内选拔赛的通知</h4>
                                <p class="text-gray-600 text-sm">2024-03-15</p>
                            </div>
                            <span class="bg-red-100 text-red-800 text-xs px-2 py-1 rounded">重要</span>
                        </div>
                        <p class="text-gray-600 mt-2">根据全国组委会通知，2024年"挑战杯"竞赛校内选拔赛将于4月启动，请各学院做好组织申报工作...</p>
                    </div>
                    
                    <div class="border-b border-gray-200 pb-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <h4 class="text-lg font-medium mb-1">大学生科技创新活动计划立项结果公示</h4>
                                <p class="text-gray-600 text-sm">2024-03-10</p>
                            </div>
                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">公示</span>
                        </div>
                        <p class="text-gray-600 mt-2">经专家评审，大学生科技创新活动计划立项项目已确定，现予以公示...</p>
                    </div>
                    
                    <div class="border-b border-gray-200 pb-4">
                        <div class="flex justify-between items-start">
                            <div>
                                <h4 class="text-lg font-medium mb-1">关于举办"互联网+"大学生创新创业大赛训练营的通知</h4>
                                <p class="text-gray-600 text-sm">2024-03-05</p>
                            </div>
                            <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">培训</span>
                        </div>
                        <p class="text-gray-600 mt-2">为备战2024年"互联网+"大赛，学校将于3月20日-22日举办训练营活动，请各参赛团队积极报名...</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 竞赛成果 -->
    <section id="achievements" class="py-16">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold mb-12 text-center">竞赛成果</h2>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
                <div class="glassmorphism p-8">
                    <h3 class="text-2xl font-semibold mb-6">获奖情况</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-gray-800">2023年国家级竞赛获奖</h4>
                            <div class="flex justify-between items-center mt-1">
                                <span class="text-sm text-gray-600">特等奖/一等奖</span>
                                <span class="font-medium">32项</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
                                <div class="bg-blue-600 h-2 rounded-full" style="width: 80%"></div>
                            </div>
                        </div>
                        
                        <div>
                            <h4 class="font-medium text-gray-800">2023年省级竞赛获奖</h4>
                            <div class="flex justify-between items-center mt-1">
                                <span class="text-sm text-gray-600">特等奖/一等奖</span>
                                <span class="font-medium">78项</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2 mt-1">
                                <div class="bg-green-600 h-2 rounded-full" style="width: 90%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="glassmorphism p-8">
                    <h3 class="text-2xl font-semibold mb-6">优秀项目展示</h3>
                    <div class="flex items-center space-x-4 mb-4">
                        <img src="https://s.coze.cn/image/-IW13aOOp4g/" alt="竞赛项目" class="w-20 h-20 rounded-lg object-cover">
                        <div>
                            <h4 class="font-medium">智能垃圾分类系统</h4>
                            <p class="text-sm text-gray-600">2023年"挑战杯"全国特等奖</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <img src="https://s.coze.cn/image/jK0Ft4SFrlQ/" alt="创业项目" class="w-20 h-20 rounded-lg object-cover">
                        <div>
                            <h4 class="font-medium">基于AI的医疗影像分析平台</h4>
                            <p class="text-sm text-gray-600">2023年"互联网+"全国金奖</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="glassmorphism p-8">
                <h3 class="text-2xl font-semibold mb-6">历年竞赛成果</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">竞赛名称</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">级别</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">获奖等级</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">获奖年份</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">"挑战杯"全国大学生课外学术科技作品竞赛</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">国家级</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">特等奖</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">中国"互联网+"大学生创新创业大赛</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">国家级</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">金奖</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">全国大学生电子设计竞赛</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">国家级</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">一等奖</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2022</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!-- 相关下载 -->
    <section id="downloads" class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <h2 class="text-3xl font-bold mb-12 text-center">相关下载</h2>
            
            <div class="glassmorphism p-8">
                <h3 class="text-2xl font-semibold mb-6">常用表格下载</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="border border-gray-200 rounded-lg p-4 flex justify-between items-center">
                        <div>
                            <h4 class="font-medium text-gray-800">学科竞赛项目申报书</h4>
                            <p class="text-sm text-gray-600">2024年版</p>
                        </div>
                        <a href="#" class="bg-blue-100 text-blue-800 p-2 rounded-full">
                            <i class="fas fa-download"></i>
                        </a>
                    </div>
                    
                    <div class="border border-gray-200 rounded-lg p-4 flex justify-between items-center">
                        <div>
                            <h4 class="font-medium text-gray-800">学科竞赛项目中期检查表</h4>
                            <p class="text-sm text-gray-600">2024年版</p>
                        </div>
                        <a href="#" class="bg-blue-100 text-blue-800 p-2 rounded-full">
                            <i class="fas fa-download"></i>
                        </a>
                    </div>
                    
                    <div class="border border-gray-200 rounded-lg p-4 flex justify-between items-center">
                        <div>
                            <h4 class="font-medium text-gray-800">学科竞赛项目结题报告</h4>
                            <p class="text-sm text-gray-600">2024年版</p>
                        </div>
                        <a href="#" class="bg-blue-100 text-blue-800 p-2 rounded-full">
                            <i class="fas fa-download"></i>
                        </a>
                    </div>
                    
                    <div class="border border-gray-200 rounded-lg p-4 flex justify-between items-center">
                        <div>
                            <h4 class="font-medium text-gray-800">竞赛获奖证书申请表</h4>
                            <p class="text-sm text-gray-600">2024年版</p>
                        </div>
                        <a href="#" class="bg-blue-100 text-blue-800 p-2 rounded-full">
                            <i class="fas fa-download"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 登录 -->
    <section id="login" class="py-16 hidden">
        <div class="container mx-auto px-4 max-w-md">
            <div class="glassmorphism p-8">
                <h2 class="text-2xl font-bold mb-8 text-center">用户登录</h2>
                
                <form>
                    <div class="mb-4">
                        <label for="username" class="block text-gray-700 font-medium mb-2">学号/工号</label>
                        <input type="text" id="username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    
                    <div class="mb-6">
                        <label for="password" class="block text-gray-700 font-medium mb-2">密码</label>
                        <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                    
                    <button type="submit" class="btn-primary text-white w-full py-3 rounded-lg font-medium mb-4">登录</button>
                    
                    <div class="text-center">
                        <a href="#" class="text-blue-600 text-sm">忘记密码?</a>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">关于我们</h3>
                    <p class="text-gray-400">学科竞赛管理系统由本科生院负责建设和管理，旨在为全校师生提供竞赛信息服务和项目管理平台。</p>
                </div>
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">联系方式</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li>电话: 0571-8820XXXX</li>
                        <li>邮箱: .....</li>
                        <li>地址: </li>
                    </ul>
                </div>
                
        
                
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-600 transition">
                            <i class="fab fa-weixin"></i>
                        </a>
                        <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-red-600 transition">
                            <i class="fab fa-weibo"></i>
                        </a>
                        <a href="#" class="bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center hover:bg-blue-400 transition">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2024 学科竞赛管理系统. 保留所有权利.</p>
                <p class="mt-2">仅供参考</p>
                <p class="mt-2">created by <a href="https://space.coze.cn" class="text-blue-400 hover:underline">coze space</a></p>
            </div>
        </div>
    </footer>

    <script>
        // 移动端菜单切换
        document.getElementById('mobileMenuButton').addEventListener('click', function() {
            document.getElementById('mobileMenu').classList.toggle('active');
        });
        
        // 登录按钮点击事件
        document.querySelectorAll('a[href="#login"]').forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                document.querySelector('#login').classList.remove('hidden');
                document.querySelector('#login').scrollIntoView({ behavior: 'smooth' });
            });
        });
        
        // 导航链接点击事件
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            if(anchor.getAttribute('href') !== '#login') {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({ 
                        behavior: 'smooth' 
                    });
                });
            }
        });
    </script>
</body>
</html>